<template>
  <h1>筛选商品</h1>
  <div class="shopbox">
    <div>
      分类：
      <el-select v-model="query.category" class="m-2" placeholder="Select">
        <el-option v-for="item in shopping" :key="item" :label="item" :value="item" />
      </el-select>
    </div>
    <div>
      搜索：
      <el-input v-model="query.search" placeholder="美妆" clearable />
      <el-button :icon="Search" @click="searchfun"></el-button>
    </div>
  </div>
  <el-table :data="list" style="width: 100%" v-loading="loading">
    <el-table-column prop="proid" label="商品编号" width="120" />
    <el-table-column label="图片" width="120">
      <template #default="scope">
        <img :src="scope.row.img1">
      </template>
    </el-table-column>
    <el-table-column prop="proname" label="商品名称" width="120" />
    <el-table-column prop="brand" label="品牌" width="80" />
    <el-table-column prop="originprice" label="价格" width="100" />
    <el-table-column prop="discount" label="折扣" width="80" />
    <el-table-column prop="sales" label="销量" width="100" />
    <el-table-column prop="stock" label="库存" width="100" />
    <el-table-column label="是否推荐" width="100">
      <template #default="scope">
        <el-switch v-model="scope.row.isrecommend" />
      </template>
    </el-table-column>
    <el-table-column label="操作" width="100">
      <el-button link type="primary" size="small">删除</el-button>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">

import { reactive, ref } from "vue";
import service from "../../../ulit/service";
import 'element-plus/dist/index.css'
import { ElMessage } from 'element-plus';
import { Search } from '@element-plus/icons-vue'
const loading = ref(true)
// 一、分类
// 定义了分类的数据
const shopping = reactive<string[]>([])
// 获取分类
const getshopping = () => {
  service({
    url: "/pro/getCategory",
  }).then(res => {
    if (res.data.code === '200') {
      shopping.length = 0
      shopping.push(...res.data.data)
    }
  })
}
getshopping()
// 定义查询条件
const query = reactive<{
  category?: string,
  search?: string
}>({
  category: '',
  search: ''
})
// 定义查询的结果（表格里的数据）
interface Igood {
  brand: string,
  category: string,
  desc: string,
  discount: number,
  img1: string,
  isrecommend: number,
  issale: number,
  isseckill: number,
  originprice: number,
  proid: string,
  proname: string,
  sales: number,
  stock: number
}
const list = reactive<Igood[]>([])

const searchfun = () => {
  service({
    url: "pro/searchPro",
    method: "post",
    data: query
    // data: `category=${query.category}&search=${query.search}`
  }).then(res => {
    if (res.data.code === '200') {
      // console.log(res.data);
      list.length = 0
      list.push(...res.data.data)
      loading.value = false
    }
  })
}
searchfun()
</script>

<style scoped>
.shopbox {
  /* width: 100%;
  margin: 0 auto; */
  margin: 30px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.el-input {
  width: 500px;
}

img {
  width: 100px;
  height: 75px;
}
</style>